<template>
  <div style="width: 100%; height: 100%; background-color: #e6ecf5">
    <div style="padding-top: 10px; padding-left: 10px; display: flex; justify-content: space-between; padding-right: 10px">
      <el-form inline style="width: 100%">
        <el-form-item label="类别" style="margin-bottom: 10px">
          <el-select style="width: 200px" :show-arrow="false" :offset="2"></el-select>
        </el-form-item>
        <el-form-item label="关键字" style="margin-bottom: 10px">
          <el-input></el-input>
        </el-form-item>
      </el-form>
      <el-button type="success" @click="onHeartRateCheck">运行状态检测</el-button>
      <el-button type="primary" @click="showConfigDialog">新建应用</el-button>
    </div>

    <div class="flex flex-wrap gap-4" style="padding: 10px; padding-top: 0">
      <el-card style="width: 250px">
        <template #header>
          <div style="display: flex; justify-content: space-between; vertical-align: middle">
            <div>统一门户</div>
            <div style="color: green; font-size: 20px">
              <el-icon><Opportunity /></el-icon>
            </div>
          </div>
        </template>
        <div style="width: 210px; height: 160px">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F06%2F2019%2F224553479_2_20210620075658301&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1744783794&t=6b4b423ec78a5a7730cba353bf4add82"
            style="width: 100%; height: 100%"
          />
        </div>
        <template #footer>
          <div style="width: 100%; display: flex; justify-content: end">
            <el-space>
              <el-dropdown split-button type="primary" @command="handleCommand" @click="handleClick">
                功能制作
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="a">应用配置</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button @click="onPreiew" type="success">预览</el-button>
            </el-space>
          </div>
        </template>
      </el-card>

      <el-card style="width: 250px">
        <template #header>
          <div style="display: flex; justify-content: space-between; vertical-align: middle">
            <div>门诊预约</div>
            <div style="color: green; font-size: 20px">
              <el-icon><Opportunity /></el-icon>
            </div>
          </div>
        </template>
        <div style="width: 210px; height: 160px">
          <img src="https://img2.baidu.com/it/u=241979237,4244889693&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" style="width: 100%; height: 100%" />
        </div>
        <template #footer>
          <div style="width: 100%; display: flex; justify-content: end">
            <el-space>
              <el-dropdown split-button type="primary">
                功能制作
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>配置查看</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button @click="onPreiew" type="success">预览</el-button>
            </el-space>
          </div>
        </template>
      </el-card>

      <el-card style="width: 250px">
        <template #header>
          <div style="display: flex; justify-content: space-between; vertical-align: middle">
            <div>医技预约</div>
            <div style="color: red; font-size: 20px">
              <el-icon><Opportunity /></el-icon>
            </div>
          </div>
        </template>
        <div style="width: 210px; height: 160px">
          <img
            src="https://pic.rmb.bdstatic.com/bjh/250225/dump/0a00a3ec5e203cf6b39a9a79783ecd07.png?x-bce-process=image/watermark,bucket_baidu-rmb-video-cover-1,image_YmpoL25ld3MvNjUzZjZkMjRlMDJiNjdjZWU1NzEzODg0MDNhYTQ0YzQucG5n,type_RlpMYW5UaW5nSGVpU01HQg==,w_14,text_QOW_g-iDuOWkluenkemDkei_nOWMu-eUnw==,size_14,x_11,y_11,interval_2,color_FFFFFF,effect_softoutline,shc_000000,blr_2,align_1"
            style="width: 100%; height: 100%"
          />
        </div>
        <template #footer>
          <div style="width: 100%; display: flex; justify-content: end">
            <el-space>
              <el-dropdown split-button type="primary">
                功能制作
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>配置查看</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button type="danger">删除</el-button>
            </el-space>
          </div>
        </template>
      </el-card>
    </div>
  </div>
  <dw-application-config-dialog ref="configDialogRef"></dw-application-config-dialog>
  <div class="drawer-box">
    <el-drawer v-model="drawer" title="门诊预约项目配置" :direction="direction" size="1024">
      <template #header>
        <div style="width: 50%; display: flex; justify-content: space-between; align-items: center; vertical-align: middle">
          <div class="header-title"><span style="color: red">【新建】</span>应用程序</div>
        </div>
      </template>
      <div class="drawer-body">
        <el-steps class="mb-4" :space="200" :active="activeIndex" simple>
          <el-step title="应用服务器信息" :icon="Edit" />
          <el-step title="应用程序信息" :icon="Picture" />
          <el-step title="检测并部署" :icon="UploadFilled" />
          <el-step title="完成" :icon="UploadFilled" />
        </el-steps>

        <div v-if="activeIndex === 0" style="height: calc(100% - 110px)">
          <el-form :model="form" label-width="auto" style="padding: 30px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="服务器IP">
                  <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="Please Input" @select="handleSelect" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务器密码" label-width="120">
                  <el-input v-model="form.name" type="password" placeholder="Please input password">
                    <icon-butotn></icon-butotn>
                    <template #append>
                      <el-icon style="font-size: 18px; cursor: pointer"><View /></el-icon
                    ></template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="端口">
                  <el-input-number v-model="form.portNo" :min="0" :max="65535" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="排序">
                  <el-input-number v-model="form.portNo" :min="1" :max="10" />
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="部署脚本模板">
                  <el-select v-model="value" placeholder="Select" :offset="2" :show-arrow="false">
                    <el-option v-for="item in templates" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div v-if="activeIndex === 1" style="height: calc(100% - 110px); overflow-y: auto">
          <el-form :model="form" label-width="auto" style="padding: 30px">
            <el-form-item label="应用程序包">
              <el-select v-model="value" placeholder="Select" :offset="2">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="应用分类">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="应用名称">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="自动登录账号">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="自动登录密码">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="前端应用名称">
              <el-col :span="24">
                <el-input v-model="form.name" />
              </el-col>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="前端应用程序路径">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="前端应用端口" label-width="120">
                  <el-input-number v-model="form.portNo" :min="0" :max="65535" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="后端服务名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="后端服务程序路径">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="后端服务端口" label-width="120">
                  <el-input-number v-model="form.portNo" :min="0" :max="65535" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="应用图片">
              <el-upload
                class="avatar-uploader"
                style="border: 1px solid var(--el-border-color)"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>

            <el-form-item label="应用说明">
              <el-input v-model="form.name" :rows="2" type="textarea" />
            </el-form-item>
          </el-form>
        </div>
        <div v-if="activeIndex === 2" style="height: calc(100% - 110px)">运维参数配置</div>
        <div v-if="activeIndex === 3" style="height: calc(100% - 110px)">运维参数配置</div>
        <div style="width: 100%; border-top: 1px solid var(--el-border-color)">
          <div style="width: calc(100% - 20px); height: 60px; display: flex; justify-content: end; align-items: center; vertical-align: middle">
            <el-button v-if="activeIndex !== 0" @click="nextStep(-1)">上一步</el-button>
            <el-button type="primary" v-if="activeIndex !== 3" @click="nextStep(1)">下一步</el-button>
            <el-button type="primary" v-if="activeIndex === 3">完成</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import DwApplicationConfigDialog from './components/config-dialog.vue';
import { Edit, Picture, UploadFilled } from '@element-plus/icons-vue';
import { ElMessage, type DrawerProps, type UploadProps } from 'element-plus';
defineOptions({
  name: 'AppInstallRecord',
});
import { Plus } from '@element-plus/icons-vue';
const state1 = ref('');
const drawer = ref(false);
const activeIndex = ref<number>(0);
const direction = ref<DrawerProps['direction']>('rtl');
const value = ref('');
interface RestaurantItem {
  value: string;
  link: string;
}
const restaurants = ref<RestaurantItem[]>([]);
const querySearch = (queryString: string, cb: (results: RestaurantItem[]) => void) => {
  const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value;
  // call callback function to return suggestions
  cb(results);
};
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};
const handleSelect = (item: Record<string, string>) => {
  console.log(item);
};
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ];
};
const handleCommand = (command: string | number | object) => {
  ElMessage(`click on item ${command}`);
};
const handleClick = () => {};
onMounted(() => {
  restaurants.value = loadAll();
});
const options = [
  {
    value: '01',
    label: '基础管理应用模板',
  },
  {
    value: '02',
    label: '通用业务服务模板',
  },
];
const templates = [
  {
    value: '01',
    label: 'docker容器部署模板',
  },
];
const nextStep = (setp: number) => {
  activeIndex.value += setp;
};

const configDialogRef = ref();
const showConfigDialog = () => {
  // configDialogRef.value.showDialog()
  drawer.value = true;
};
const onPreiew = () => {
  window.open('https://www.baidu.com');
};

const imageUrl = ref('');

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('Avatar picture must be JPG format!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!');
    return false;
  }
  return true;
};

const onHeartRateCheck = () => {
  ElMessage(`心跳监测`);
};

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  sortNo: 1,
  portNo: 8080,
});
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.gap-4 {
  gap: 1rem;
}
.drawer-box {
  :deep(.el-drawer__header) {
    margin: 0;
    padding: 0 20px;
  }
  :deep(.el-drawer__body) {
    margin: 0;
    padding: 0;
  }
  :deep(.el-tabs__item) {
    width: 120px;
  }

  :deep(.el-tabs--left) {
    height: 100%;
    background: #eef1f6;
  }
  :deep(.el-tabs__content) {
    height: 100%;
    background-color: #fff;
  }

  :deep(.el-tabs--left .el-tabs__header.is-left) {
    margin: 0px;
  }
  .header-title {
    height: 50px;
    line-height: 50px;
    // font-weight: bold;
    // color: #1e6fff;
  }
  .drawer-body {
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--el-border-color);
  }
}
</style>
